<template>
  <el-dialog :visible.sync="dialogVisible" title="订单取消处理" width="1100px" v-drag2anywhere>
    <el-form :model="formData" label-width="90px" :rules="rules">
      <el-row>
        <el-col :span="12">
          <el-form-item label="子订单号:">
            {{formData.ordercode}}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="主订单号:">
           {{formData.mordercode}}
          </el-form-item>
        </el-col>
        <el-col >
          <el-form-item label="收货信息:">
           {{formData.buyerinfo.buyer}}-{{formData.buyerinfo.mobile}}-{{formData.buyerinfo.address}}
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item label="订单明细">
            <el-table :data="formData.goods" border>
                <el-table-column label="序号" type="index"></el-table-column>
                <el-table-column label="产品名称" prop="title" ></el-table-column>
                <el-table-column label="单位" prop="unit" width="80px" align="center" ></el-table-column>
                <el-table-column label="数量" prop="count" width="80px" align="center" ></el-table-column>
                <el-table-column label="单价" prop="price"  width="100px" align="center"></el-table-column>
                <el-table-column label="总价" prop="total"  width="100px" align="center" ></el-table-column>
            </el-table>
            <div style="border:1px solid #EEEEEE; border-top: none; text-align: right; padding-right: 10px;">
                总额: <b>{{formData.amount.toFixed(2)}}</b>
            </div>
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item label="订单状态:">
            <el-select v-model="formData.status" placeholder="请选择状态">
              <el-option label="已接单" value="2"></el-option>
              <el-option label="取消订单" value="4"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item label="取消原因:" prop="cancelreason">
            <el-input type="textarea" :rows="5" placeholder="请填写订单取消原因"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
    	<el-button size="medium" @click="dialogVisible=false">取消</el-button>
      <el-button type="primary" size="medium" @click="handleSave">保存状态</el-button>
    </div>
  </el-dialog>
</template>

<script>
  export default {
    data() {
      return {
        index: -1,
        formData: {
          mordercode:'',
          ordercode:'',
          buyerinfo:{
             buyer:'',
             mobile:'',
             address:''
          },
          amount:0,
        },
        dialogVisible: false,
        rules:{
          cancelreason:[{required:true,message:"请填写订单取消原因",trigger:'blur'}]
        }
      }
    },
    methods: {
      init(index, data) {
        this.index = index;
        this.formData=data;
        console.log(data);
      },
      handleSave(){

      }
    }
  }
</script>

<style>
</style>
